{literal}
<script>
            if (window.matchMedia("(max-width: 767px)").matches)  {
        var buttons = [];
    }
    else{
        var buttons =  [//'csv', 'pdf'
                        {
                            extend: "print",
                            title: '',
                            className: "btn dark btn-outline",
                            text: "طباعه<i class='fa fa-print'></i>",
                            exportOptions: {
                                //columns: '.show-print'
                                columns: [0, 1, 2, 3, 4, 5, 6, 7, 8],
                            },
                            customize: function (win) {
                                $(win.document.body).find('table')
                                        //.addClass('compact')
                                        .css('direction', 'rtl');
                            }
                        }, {
                            extend: "copy",
                            className: "btn red btn-outline",
                            text: "نسخ",
                            exportOptions: {
                                //columns: '.show-print'
                                columns: ':visible'
                            }
                        }, {
                            extend: "excel",
                            className: "btn yellow btn-outline ",
                            text: "اكسل",
                            exportOptions: {
                                //columns: '.show-print'
                                columns: ':visible'
                            }
                        }, {
                            extend: "colvis",
                            className: "btn dark btn-outline",
                            text: "المكونات"
                        }
                    ];
    }

    var otable_clients;
    var otable_clients_del;

    function draw_clients_table() {
        if ($('#clients_table').length > 0) {
            var table_clients = $('#clients_table');
            if ($.fn.dataTable.isDataTable('#clients_table')) {
                otable_clients.ajax.reload();
            } else {
                otable_clients = table_clients.DataTable({
                    "processing": true,
                    "stateSave": true,
                    "serverSide": true,
                    "ajax": {
                        url: 'clientControllerAjax.php?do=showallajax', type: 'POST',
                        "data": {
                            datefrom: $('#datefrom').val(),
                            dateto: $('#dateto').val(),
                            userid: $('#userid').val(),
                            areaid: $('#areaid').val(),
                            typeid: $('#typeid').val(),
                            "del": function () {
                                return 0;
                            },
                            // etc..
                        }
                    }, //  server side processing
                    dom: 'Bfrtip',
                    buttons:buttons,
                    "bStateSave": true,
                    "language": {
                        "aria": {
                            "sortAscending": ": Used to order Ascending",
                            "sortDescending": ": Used to order Descending"
                        },
                        "emptyTable": "لا يوجد بيانات",
                        "info": "عرض من  _START_ إلى  _END_  - عدد عملاء البحث _TOTAL_",
                        "infoEmpty": "لا يوجد بيانات",
                        "infoFiltered": "(تنقيه  من عدد عملاء كلى _MAX_)",
                        "lengthMenu": " _MENU_ عنصر",
                        "search": "البحث:",
                        "zeroRecords": "لا يوجد بيانات تشابه البحث"
                    },
                    responsive: !0,
                    "columnDefs": [
                        {"className": "hidden-print", "targets": [0, 9, 10, 11, 12, 13, 14]}
                        ////            {// set default column settings //                "orderable": false,
                        //                "searchable": false,
                        //                "targets": [lstone],
                        //                "className": 'hide-print'
                        //            },
                        //            {// set default column settings
                        //                "orderable": false,
                        //                "searchable": false,
                        //                "targets": [belastone],
                        //                "className": 'hide-print'
                        //            },
                        //            {// set default column settings
                        //                "orderable": false,
                        //                "searchable": false, //                "targets": [thrdone],
                        //                "className": 'hide-print'
                        //            },
                        //                {targets: '_all', "className": 'show-print'}
                    ],
                    order: [
                        [0, "asc"]
                    ],
                    paging: true,
                    lengthMenu: [
                        [5, 10, 25, 50, 100, 300, 500, -1],
                        [5, 10, 25, 50, 100, 300, 500, "All"]
                    ],
                    pageLength: 10,
                    dom: "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>"
                });

                //when draw is comlete cal total of column using datatable api sum func
                otable_clients.on('draw', function (e, ajaxdata) {
                    //var sum = otablesell.column(3).data().sum();
                    $('.totalDebtClients').html(Number(ajaxdata.json.totals.totalDebtNotDel));
                    $('.totalDebtClientsPositive').html(Number(ajaxdata.json.totals.totalDebtNotDelPositiveDebtOnly));
                    $('.totalDebtClientsNegative').html(Number(ajaxdata.json.totals.totalDebtNotDelNegativeDebtOnly));
                });
            }

        }
    }

    function draw_clients_del_table() {
        if ($('#clients_del_table').length > 0) {
            var table_clients_del = $('#clients_del_table');
            if ($.fn.dataTable.isDataTable('#clients_del_table')) {
                otable_clients_del.ajax.reload();
            } else {
                otable_clients_del = table_clients_del.DataTable({
                    "processing": true,
                    "stateSave": true,
                    "serverSide": true,
                    "ajax": {
                        url: 'clientControllerAjax.php?do=showallajax', type: 'POST',
                        "data": {
                            "del": function () {
                                return 1;
                            },
                            // etc..
                        }
                    }, //  server side processing
                    "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                        $('td', nRow).css('background-color', '#F2DEDE');
                    },
                    dom: 'Bfrtip',
                    buttons: [//'csv', 'pdf'
                        {
                            extend: "print",
                            className: "btn dark btn-outline",
                            text: "طباعه<i class='fa fa-print'></i>",
                            exportOptions: {
                                //columns: '.show-print'
                                columns: ':visible'
                            },
                            customize: function (win) {
                                $(win.document.body).find('table')
                                        //.addClass('compact')
                                        .css('direction', 'rtl');
                            }
                        }, {
                            extend: "copy",
                            className: "btn red btn-outline",
                            text: "نسخ",
                            exportOptions: {
                                //columns: '.show-print'
                                columns: ':visible'
                            }
                        }, {
                            extend: "excel",
                            className: "btn yellow btn-outline ",
                            text: "اكسل",
                            exportOptions: {
                                //columns: '.show-print'
                                columns: ':visible'
                            }
                        }, {
                            extend: "colvis",
                            className: "btn dark btn-outline",
                            text: "المكونات"
                        }
                    ], "bStateSave": true,
                    "language": {
                        "aria": {
                            "sortAscending": ": Used to order Ascending",
                            "sortDescending": ": Used to order Descending"
                        },
                        "emptyTable": "لا يوجد بيانات",
                        "info": "عرض من  _START_ إلى  _END_  - عدد عملاء البحث _TOTAL_",
                        "infoEmpty": "لا يوجد بيانات",
                        "infoFiltered": "(تنقيه  من عدد عملاء كلى _MAX_)",
                        "lengthMenu": " _MENU_ عنصر",
                        "search": "البحث:",
                        "zeroRecords": "لا يوجد بيانات تشابه البحث"
                    },
                    responsive: !0,
                    "columnDefs": [//            {// set default column settings //                "orderable": false,
                        //                "searchable": false,
                        //                "targets": [lstone],
                        //                "className": 'hide-print'
                        //            },
                        //            {// set default column settings
                        //                "orderable": false,
                        //                "searchable": false,
                        //                "targets": [belastone],
                        //                "className": 'hide-print'
                        //            },
                        //            {// set default column settings
                        //                "orderable": false,
                        //                "searchable": false, //                "targets": [thrdone],
                        //                "className": 'hide-print'
                        //            },
                        //                {targets: '_all', "className": 'show-print'}
                    ],
                    order: [
                        [0, "asc"]
                    ],
                    paging: true,
                    lengthMenu: [
                        [5, 10, 15, 20, 50, -1],
                        [5, 10, 15, 20, 50, "All"]
                    ],
                    pageLength: 10,
                    dom: "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>"
                });
                //
                otable_clients_del.on('draw', function (e, ajaxdata) {
                    //var sum = otablesell.column(3).data().sum();
                    $('.totalDebtClientsDel').html(Number(ajaxdata.json.totals.totalDebtDel));
                });
            }

        }
    }
</script>
{/literal}
<div class="row">
    <div class="container">
        <ol class="breadcrumb">
            <li><a href="#">خصائص عامة</a></li>
            <li><a href="clientController.php?do=show">العملاء</a></li>
            <li class="active">عرض العملاء</li>
        </ol>
        <div class="panel panel-default panel-m">
            <!-- Default panel contents -->
            <div class="panel-heading" style="padding:5px 15px 15px">
                <h3 class="panel-title" style="display: inline-block;">عرض العملاء <br />
                    {if $message != ""}
                    {$message}
                    {/if}
                </h3>
                <a href="{$youtubes[263]->url}" target="_blank" class="hidden-print"><img
                        src="../views/default/assets/img/youtube.png" class="pull-left" alt="Youtube"
                        style="width: 2%;"></a>
                <a href="clientController.php" class="hidden-print"><input type="button" style="margin-left: 12px"
                                                                           id="submit" class="btn btn-primary pull-left " value="إضافة جديد" /></a>
            </div>

            <div class="panel-body">

                <div id="outputString" class="alert alert-block alert-success fade in hidden-print"
                     style="display:none">
                    <button type="button" class="close pull-left" data-dismiss="alert"
                            aria-hidden="true">&times;</button>
                    <p id="outputStringValue">{$outputString}</p>
                    <div class="clearfix"></div>
                </div>
                <form class="form-inline hidden-print" action="clientController.php?do=show" method="post">
                    <!--          <div class="form-group">
                                <label class="sr-only"> العميل</label>
                                <input type="text" name="clients" id="clients" class="form-control" placeholder="اسم العميل">
                              </div>-->
                    <div class="form-group">
                        <label class="sr-only"> اسم المستخدم </label>
                        <select class="select2" name="userid" id="userid">
                            <option value="-2">اختر مستخدم </option>
                            {foreach $allusers as $data }
                            <option value="{$data->userid}" {if $userid eq $data->userid}selected{/if}>
                                {$data->username}
                            </option>
                            {/foreach}
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="sr-only">الشركة - المنطقة </label>
                        <select class="select2" name="areaid" id="areaid">
                            <option value="-1">اختر الشركة - المنطقة </option>
                            {foreach $clientareaData as $area }
                            <option value="{$area.id}" {if $areaid eq $area.id}selected{/if}>
                                {$area.text}
                            </option>
                            {/foreach}
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="sr-only">أنواع العملاء </label>
                        <select class="select2" name="typeid" id="typeid">
                            <option value="-1">اختر نوع العميل </option>
                            {foreach $typeClient as $type }
                            <option value="{$type->typeId}" {if $typeid eq $type->typeId}selected{/if}>
                                {$type->typeName}
                            </option>
                            {/foreach}
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="sr-only">من التاريخ</label>
                        <input type="text" class="form-control awdatepicker" autocomplete="off"
                               data-date-format="yyyy-mm-dd" name="datefrom" id="datefrom" value="{$datefrom}">
                    </div>
                    <div class="form-group">
                        <label class="sr-only">إلى التاريخ</label>
                        <input type="text" class="form-control awdatepicker" autocomplete="off"
                               data-date-format="yyyy-mm-dd" name="dateto" id="dateto" value="{$dateto}">
                    </div>
                    <button type="submit" class="btn btn-primary">بحث</button>
                </form>
                {if $groupData->downloadClientPhones == 1}
                <a href="clientController.php?do=downloadphone" class="btn btn-success hidden-print"
                   id="downloadPhone">تحميل أرقام الهواتف</a>
                {/if}
            </div>

            <div id="exTab2" class="container">
                <ul class="nav nav-tabs hidden-print">
                    <li class="active">
                        <a href="#1" data-toggle="tab">العملاء الغير محذوفين</a>
                    </li>
                    <li><a href="#2" data-toggle="tab">العملاء المحذوفين</a>
                    </li>
                </ul>

                <div class="tab-content ">
                    <div class="tab-pane active" id="1">
                        <div class="col-lg-4 hidden-print">
                            <div class="well well-sm">
                                <h4 class="text-center">إجمالي مديونية العملاء الغير محذوفين <br />
                                    <!--{*$sum*}--><span class="totalDebtClients"></span> {$currency}
                                </h4>
                            </div>
                        </div>
                        <div class="col-lg-4 hidden-print">
                            <div class="well well-sm">
                                <h4 class="text-center">إجمالي مديونية العملاء الغير محذوفين(+) <br />
                                    <!--{*$sum*}--><span class="totalDebtClientsPositive"></span> {$currency}
                                </h4>
                            </div>
                        </div>
                        <div class="col-lg-4 hidden-print">
                            <div class="well well-sm">
                                <h4 class="text-center">إجمالي مديونية العملاء الغير محذوفين(-) <br />
                                    <!--{*$sum*}--><span class="totalDebtClientsNegative"></span> {$currency}
                                </h4>
                            </div>
                        </div>
                        <div class="clearfix"></div>


                        <!-- Table -->
                        {literal}
                        <form method="post" action="clientController.php?do=executeOperation" onsubmit="if (Spry.Widget.Form.validate(this)) {
                                    return countChoosenProducts('clientController');
                                } else {
                                    return false;
                                }">
                            {/literal}
                            <table class="table table-black" id="clients_table"><!-- dataTableClass222 -->
                                <thead>
                                    <tr>
                                        <th class="hidden-print">
                                            <input type="checkbox" name="checkAll" id="checkAll" />
                                        </th>
                                        {if $Programsettingdata->clientserial eq 1}<th>الرقم التسلسلي</th>{/if}
                                        <th>اسم العميل</th>
                                        <th>رقم التليفون</th>
                                        <th>الشركة / المنطقة</th>
                                        <!-- <th>المديونية</th> -->
                                        <th>له</th><!-- credit -->
                                        <th>عليه</th><!-- debt -->
                                        <th>حد الدين</th>
                                        <th>نوع العميل</th>
                                        <th>المستخدم</th>
                                        <th>المندوب</th>
                                        <th>اخر تعديل بواسطة</th>
                                        <th>تاريخ الاضافة</th>
                                        <!-- <th>صافي المبيعات</th>
                                        <th>صافي المرتجعات</th> -->
                                        {if $Programsettingdata->clientdetail eq 0}
                                        <th class="hidden-print"> طباعه </th>
                                        {/if}
                                        <th class="hidden-print">ايقاف</th>
                                        <th class="hidden-print">تعديل</th>
                                        <th class="hidden-print">تهيئة</th>
                                        {if {$Programsettingdata->allowfinsldelete} eq 0}
                                        <th class="hidden-print">حذف </th>
                                        {/if}
                                        <th class="hidden-print">قيد اليومية</th>
                                        <th class="hidden-print">كشف حساب</th>
                                    </tr>
                                </thead>
                            </table>
                            <div class="col-lg-4">
                                <div class="well well-sm">
                                    <h4 class="text-center">إجمالي مديونية العملاء الغير محذوفين <br />
                                        <span class="totalDebtClients"></span> {$currency}
                                    </h4>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="well well-sm">
                                    <h4 class="text-center">إجمالي مديونية العملاء الغير محذوفين(+) <br />
                                        <!--{*$sum*}--><span class="totalDebtClientsPositive"></span> {$currency}
                                    </h4>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="well well-sm">
                                    <h4 class="text-center">إجمالي مديونية العملاء الغير محذوفين(-) <br />
                                        <!--{*$sum*}--><span class="totalDebtClientsNegative"></span> {$currency}
                                    </h4>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <hr />


                            <!-- Modal -->
                            <div class="hidden-print">
                                <div class="modal fade " id="myModal1" tabindex="-1" role="dialog"
                                     aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close pull-left" data-dismiss="modal"
                                                        aria-hidden="true">&times;</button>
                                                <div class="modal-title">تأكيد حذف عميل</div>
                                            </div>
                                            <div class="modal-body"> هل تريد حذف هذا العميل؟ </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default"
                                                        data-dismiss="modal">لا</button>
                                                <button type="button" class="btn btn-primary savemodel1">نعم</button>
                                            </div>
                                        </div>
                                        <!-- /.modal-content -->
                                    </div>
                                    <!-- /.modal-dialog -->
                                </div>
                            </div>
                            <!-- /.modal -->



                            <div class="hidden-print">
                                <div class="col-lg-12">
                                    <div class="well well-sm">
                                        <div class="form-group">
                                            <div class="col-lg-4">
                                                <label for="operation"></label>
                                                <span id="spryselect1">
                                                    <select name="operation" id="operation"
                                                            data-placeholder="اختر العملية" class="select2 wdt100">
                                                        <option value="-1">اختر عملية</option>
                                                        <option value="1">ايقاف</option>
                                                        <option value="2">تشغيل </option>
                                                    </select>
                                                    <span class="selectInvalidMsg">*</span></span>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-lg-4">
                                                <input name="" class="hidden-print btn btn-primary" type="submit"
                                                       value="تنفيذ" />
                                            </div>
                                        </div>
                                        <div class="clearfix"></div>
                                        <div id="noElementsError" class="alert alert-danger fade in hidden-print"
                                             style="display:none;">
                                            <button type="button" class="close pull-left" data-dismiss="alert"
                                                    aria-hidden="true">×</button>
                                            <p>يجب اختيار العناصر أولاً</p>
                                            <div class="clearfix"></div>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-lg-4">
                                            <button type="button" onclick="print_Custom('mycustomheader');"
                                                    class="btn btn-success pull-right">طباعة</button>
                                            <!--                                            <button type="button" onclick="
                                                                                                otable_clients.destroy();
                                                                                                otable_clients_del.destroy();
                                                                                                print_Div('1');
                                                                                                draw_clients_table();
                                                                                                draw_clients_del_table();

                                                                                                " class="btn btn-success pull-right">tab 1طباعة</button>-->
                                        </div>
                                    </div>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                            <div class="clearfix"></div>
                        </form>
                    </div>


                    <div class="tab-pane" id="2">
                        <div class="col-lg-offset-8 col-lg-4">
                            <div class="well well-sm hidden-print">
                                <h4 class="text-center">إجمالي مديونية العملاء المحذوفين <br />
                                    <!--{*$sumaz*}--><span class="totalDebtClientsDel"></span> {$currency}
                                </h4>
                            </div>
                        </div>
                        <div class="clearfix"></div>


                        <!-- Table -->
                        {literal}
                        <form method="post" action="clientController.php?do=executeOperation" onsubmit="if (Spry.Widget.Form.validate(this)) {
                                    return countChoosenProducts('clientController');
                                } else {
                                    return false;
                                }">
                            {/literal}
                            <table class="table table-black" id="clients_del_table"><!-- dataTableClass222 -->
                                <thead>
                                    <tr>
                                        <th class="hidden-print">
                                            <input type="checkbox" name="checkAll" id="checkAll" />
                                        </th>
                                        {if $Programsettingdata->clientserial eq 1}<th>الرقم التسلسلي</th>{/if}
                                        <th>اسم العميل</th>
                                        <th>رقم التليفون</th>
                                        <th>الشركة / المنطقة</th>
                                        <!-- <th>المديونية</th> -->
                                        <th>له</th><!-- credit -->
                                        <th>عليه</th><!-- debt -->
                                        <th>حد الدين</th>
                                        <th>نوع العميل</th>
                                        <th>المستخدم</th>
                                        <th>اخر تعديل بواسطة</th>
                                        <!-- <th>صافي المبيعات</th>
                                        <th>صافي المرتجعات</th> -->
                                        <th class="hidden-print">ايقاف</th>
                                        <th class="hidden-print">تعديل</th>
                                        {if {$Programsettingdata->allowfinsldelete} eq 0}
                                        <th class="hidden-print">حذف </th>
                                        {/if}
                                    </tr>
                                </thead>


                            </table>
                            <div class="col-lg-offset-8 col-lg-4">
                                <div class="well well-sm">
                                    <h4 class="text-center">إجمالي مديونية العملاء المحذوفين <br />
                                        <span class="totalDebtClientsDel"></span> {$currency}
                                    </h4>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <hr />


                            <!-- Modal -->
                            <div class="hidden-print">
                                <div class="modal fade " id="myModal1" tabindex="-1" role="dialog"
                                     aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close pull-left" data-dismiss="modal"
                                                        aria-hidden="true">&times;</button>
                                                <div class="modal-title">تأكيد حذف عميل</div>
                                            </div>
                                            <div class="modal-body"> هل تريد حذف هذا العميل؟ </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default"
                                                        data-dismiss="modal">لا</button>
                                                <button type="button" class="btn btn-primary savemodel1">نعم</button>
                                            </div>
                                        </div>
                                        <!-- /.modal-content -->
                                    </div>
                                    <!-- /.modal-dialog -->
                                </div>
                            </div>
                            <!-- /.modal -->



                            <div class="hidden-print">
                                <div class="col-lg-12">
                                    <div class="well well-sm">
                                        <div class="form-group">
                                            <div class="col-lg-4">
                                                <label for="operation"></label>
                                                <span id="spryselect1">
                                                    <select name="operation" id="operation"
                                                            data-placeholder="اختر العملية" class="select2 wdt100">
                                                        <option value="-1">اختر عملية</option>
                                                        <option value="1">ايقاف</option>
                                                        <option value="2">تشغيل </option>
                                                    </select>
                                                    <span class="selectInvalidMsg">*</span></span>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-lg-4">
                                                <input name="" class="hidden-print btn btn-primary" type="submit"
                                                       value="تنفيذ" />
                                            </div>
                                        </div>
                                        <div class="clearfix"></div>
                                        <div id="noElementsError" class="alert alert-danger fade in hidden-print"
                                             style="display:none;">
                                            <button type="button" class="close pull-left" data-dismiss="alert"
                                                    aria-hidden="true">×</button>
                                            <p>يجب اختيار العناصر أولاً</p>
                                            <div class="clearfix"></div>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-lg-4">
                                            <button type="button" onclick="print_Custom('mycustomheader');"
                                                    class="btn btn-success pull-right">طباعة</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                            <div class="clearfix"></div>
                        </form>
                    </div>

                </div>
            </div>



        </div>

    </div>
</div>
{literal}
<script type="text/javascript">
    var spryselect1 = new Spry.Widget.ValidationSelect("spryselect1", {isRequired: false, invalidValue: "-1"});
    $(function () {
        draw_clients_table();
        draw_clients_del_table();
    });
    $(document).on('click', ".freeTheClient", function () {
        var thisBtn = $(this);
        if (!thisBtn.hasClass('processing...')) {
            thisBtn.addClass('processing...')
            var id = thisBtn.data('id');
            $.ajax({
                url: 'clientControllerAjax.php?do=freeClient&id=' + id,
                success: function (data) {
                    thisBtn.removeClass('processing...');

                    if (Number(data) == 1)
                        thisBtn.css('background-color', '#bcffbc');
                    else
                        thisBtn.css('background-color', '#f5bdbd');

                    setTimeout(function () {
                        thisBtn.css('background-color', 'unset');
                    }, 1500);
                }
            });
        }
    });
</script>
{/literal}